<template>
  <div class="app-container">
    <el-card>
      <el-form size="small" :model="searchForm" inline>
        <el-form-item label="banner分类">
          <el-select
            clearable
            v-model="searchForm.bannerCate"
            placeholder="请选择banner分类"
          >
            <el-option
              v-for="item in bannerCateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select
            v-model="searchForm.publishStatus"
            placeholder="请选择发布状态"
            clearable
          >
            <el-option label="未发布" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="search()"
            >查询</el-button
          >
        </el-form-item>
      </el-form>

      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="addArtice()"
        >新增banner</el-button
      >
      <el-button size="small" icon="el-icon-delete" @click="batchDelete()"
        >批量删除</el-button
      >

      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        border
        style="margin-top: 20px"
        @selection-change="selectTableList"
      >
        <el-table-column align="center" type="selection"></el-table-column>
        <el-table-column align="center" prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="bannerCateName"
          label="banner分类"
        >
        </el-table-column>
        <el-table-column align="center" prop="name" label="名称">
        </el-table-column>
        <el-table-column align="center" prop="pic" label="图片">
          <template slot-scope="scope">
            <el-image
              :preview-src-list="[scope.row.pic]"
              :src="scope.row.pic"
              style="width: 50px; height: 50px"
              alt=""
            />
          </template>
        </el-table-column>

        <el-table-column align="center" prop="url" label="链接地址">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column align="center" prop="publishStatus" label="是否上架">
          <template slot-scope="scope">
            <el-switch
              @change="handleStatusChange(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.publishStatus"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.publishStatus == 1"
              size="mini"
              type="text"
              @click="edit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="deleteArtice(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              :disabled="scope.$index == 0"
              type="text"
              @click="UpStatus(scope.$index, scope.row)"
              >上移</el-button
            >
            <el-button
              :disabled="upCount(scope.$index)"
              size="mini"
              type="text"
              @click="downStatus(scope.$index, scope.row)"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </el-card>
    <add
      @getList="getList"
      :articleCateList="cateList"
      :bannerCateList="bannerCateList"
      ref="add"
    ></add>
  </div>
</template>
<script>
import {
  getBannerList,
  editBanner,
  deleteBanner,
  getArticleListTree
} from "@/api/article";
import add from "./components/add.vue";
export default {
  components: {
    add
  },
  name: "index",
  computed: {},
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        bannerCate: "",
        publishStatus: ""
      },
      listLoading: false,
      tableData: {
        data: [],
        total: 0
      },
      cateList: [],
      bannerCateList: [],
      selectList: []
    };
  },
  async created() {
    this.bannerCateList = await this.$getDictData("banner_cate");
    await this.getCidList();
    await this.getList();
  },
  methods: {
    batchDelete() {
      if (this.selectList.length == 0) {
        this.$message.error("请选择要删除的banner");
        return;
      }
      console.log(this.selectList.join(","));
      this.$confirm("确定删除选中的banner?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteBanner(this.selectList.join(",")).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    selectTableList(val) {
      this.selectList = val.map(v => v.id);
    },
    deleteArtice(idx, v) {
      this.$confirm("确定删除该banner?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteBanner(v.id).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({});
        });
    },
    downStatus(idx, v) {
      console.log(v);
      let params = {
        id: v.id,
        sort: this.tableData.data[idx + 1].sort - 1
      };
      editBanner(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    UpStatus(idx, v) {
      let params = {
        id: v.id,
        sort: this.tableData.data[idx - 1].sort + 1
      };

      editBanner(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    upCount(idx) {
      let flag = false;
      if (
        this.searchForm.pageSize - 1 == idx ||
        (this.tableData.data.length < this.searchForm.pageSize &&
          idx == this.tableData.data.length - 1)
      ) {
        flag = true;
      }
      return flag;
    },
    handleStatusChange(idx, v) {
      console.log(idx, v.publishStatus);
      let params = {
        id: v.id,
        publishStatus: v.publishStatus
      };
      editBanner(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    addArtice() {
      this.$refs.add.openlog();
    },
    edit(idx, v) {
      this.$refs.add.openlog(v);
    },
    getCidList() {
      getArticleListTree().then(res => {
        this.cateList = res.data;
      });
    },
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        bannerCate: "",
        publishStatus: ""
      };
      this.getList();
    },
    search() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getBannerList(this.searchForm)
        .then(res => {
          this.tableData.data = res.data.list;

          this.tableData.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss"></style>
